<template>
  <view class="u-m-20 u-p-20 live-box">
    <u-text text="直播标题" color="#000" bold></u-text>
    <u-textarea placeholder="请输入内容" v-model="params.title"></u-textarea>
    <up-upload max-count="1" width="180rpx" :fileList="data.fileList" height="180rpx" @afterRead="afterRead"
      @delete="deletePic">
      <image src="@/static/images/01_18hjm.png" mode="widthFix" style="width: 180rpx;height: 180rpx;"></image>
    </up-upload>
  </view>
  <view class="u-flex-y-center u-p-l-20 u-p-r-20" @click="$u.route('/pages/index/newsList/changeHouse')">
    <u-text text="推荐房源" color="#000" bold></u-text>
    <u-text suffixIcon="arrow-right" align="right" iconStyle="font-size: 16px;color:#666666" text="请选择"></u-text>
  </view>
  <view class="u-p-l-20 u-p-r-20" v-if="data.houseInfo.id">
    <house-item :item="data.houseInfo" customStyle="background:#fff" page="/" :imageWidth="234" imageHeight="192">
      <template #right>
        <view class="u-flex-between u-flex-column u-flex-fill">
          <view class="house-name u-flex-y-center u-flex-between">
            <view>{{data.houseInfo.title}}</view>
            <u-image src="/static/images/01_34ghj.png" @click.stop="handleDel" width="34rpx" height="34rpx"
              :fade="false"></u-image>
          </view>
          <view class="house-desc">“{{data.houseInfo.description}}”</view>
          <view class="house-info">“{{data.houseInfo.space}}㎡ | {{data.houseInfo.house_type_text}} | 简装”</view>
          <view class="house-price u-flex-y-center u-flex-between">
            <text>市场价：{{data.houseInfo.market_price}}万</text>
            <text>优惠价：{{data.houseInfo.price}}万</text>
          </view>
        </view>
      </template>
    </house-item>
  </view>
  <view class="u-flex-y-center u-m-20 u-p-20" style="background: #fff;border-radius: 24rpx;"
    @click="$u.route('/pages/index/houseLive/changeCoupon')">
    <u-text text="选择优惠券" color="#000" bold></u-text>
    <u-text suffixIcon="arrow-right" align="right" iconStyle="font-size: 16px;color:#666666" text="请选择"></u-text>
  </view>
  <view class="" v-if="data.coupon.id">
    <coupon-item :item="data.coupon"></coupon-item>
  </view>
  <view class="action-btn" @click="_liveCreate">开启直播 </view>
</template>

<script setup>
  import houseItem from '@/components/house-item/house-item.vue'
  import couponItem from '../components/coupon-item.vue';
  import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';
  import { Livecreate, couponList } from '../../../config/api';
  import { _upload } from '../../../util/util';
  const data = ref({
    houseInfo: {},
    fileList: [],
    coupon: {}
  })
  const params = ref({})
  onMounted(() => {
    uni.$on('formEvent', row => {
      data.value.houseInfo = row
    })
    uni.$on('formCoupon', row => {
      data.value.coupon = row
    })

  })
  onBeforeUnmount(() => {
    uni.$off('formEvent')
    uni.$off('formCoupon')
  })
  // 创建直播间
  const _liveCreate = () => {
    let cover_img = data.value?.fileList[0]?.url ?? ''
    Livecreate({
      ...params.value,
      cover_img,
      coupon_ids: data.value.coupon.id,
      house_ids: data.value.houseInfo.id,
    }).then(res => {
      uni.$u.toast(res.msg)
      uni.$u.route({
        type: 'redirectTo',
        url: `/pages/index/houseLive/livePusher?id=${res.data.id}&type=1`
      })
    })
  }
  const handleDel = () => {
    data.value.houseInfo = {}
  }
  // 上传图片
  const afterRead = async (event) => {
    let list = [].concat(event.file)
    let index = data.value.fileList.length
    list.forEach((item) => {
      data.value.fileList.push({
        ...item,
        status: 'uploading',
        message: '上传中',
      });
    });
    for (let i = 0; i < list.length; i++) {
      const result = await _upload(list[i].url)
      let item = data.value.fileList[index];
      data.value.fileList.splice(index, 1, {
        ...item,
        status: 'success',
        message: '',
        url: result,
      });
      index++
    }
  }
  // 删除图片
  const deletePic = (event) => {
    data.value.fileList.splice(event.index, 1)
  }
</script>

<style lang="scss" scoped>
  .live-box {
    background-color: #fff;
    border-radius: 24rpx;

    ::v-deep .u-textarea {
      border-color: #f8f8f8 !important;
      background: #f8f8f8;
      margin: 20rpx 0;
    }
  }

  .house-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 800;
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }

  .action-btn {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    line-height: 90rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    text-align: center;
    bottom: env(safe-area-inset-bottom);
  }
</style>